<html>
<head>
  <style>
    * {
      border-radius: 0px !important;
      -moz-border-radius: 0px !important;
      -webkit-border-radius: 0px !important;
    }
    @font-face {
      font-family: "NUR Font";
      src: local("NUR Font"), url(http://www.nur.cn/Static/Fonts/nur_pc_font.ttf) format("opentype");
      /* non-IE */
    }
    .nur_font {
      font-weight: 100;
      font-family: "NUR Font";
    }
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      position: absolute;
    }
    .froala-editor {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      position: absolute;
    }
    .fr-wrapper {
      min-height: 512px;
    }
  </style>
  <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet"
    type="text/css" />
  <script type="text/javascript" src="./javascripts/froala_editor.pkgd.min.js"></script>
  <script src="http://www.nur.cn/Static/js/UyghurInput_a.js"></script>
</head>
<body>
  <div id="froala-editor" class="froala-editor">
    <h3>Click here to edit the content</h3>
    <p>This is the inline example for the Froala rich text editor. For this you have to set the <a
        href="../docs/options#toolbarInline" title="toolbarInline option" target="_blank">toolbarInline</a> option to
      <code>true</code>.</p>
  </div>
  <script>
    class MsFroalaEditor {
      constructor(FroalaEditor) {
        this.addvideoserver(FroalaEditor);
        this.addvideoManager(FroalaEditor);
        var FE = new FroalaEditor('div#froala-editor', {
          direction: 'rtl',
          imageUploadParam: 'files',
          imageUploadURL: 'http://localhost:8081/Service/Images/upload/?FileType=3',
          videoUploadParam: 'files',
          videoUploadURL: 'http://localhost:8081/Service/Video/upload/?FileType=6',
          fontFamily: {
            'Arial,Helvetica,sans-serif': 'Arial',
            'Georgia,serif': 'Georgia',
            'Impact,Charcoal,sans-serif': 'Impact',
            'Tahoma,Geneva,sans-serif': 'Tahoma',
            "'Times New Roman',Times,serif": 'Times New Roman',
            'Verdana,Geneva,sans-serif': 'Verdana',
            'NUR Font,Geneva,sans-serif': 'نۇر تورى'
          },
          documentReady: true,

          //toolbarInline: true,
          //charCounterCount: false,
          toolbarButtons: {
            'moreText': {
              'buttons': ['fullscreen', 'bold', 'italic', 'underline', 'fontFamily', 'strikeThrough', 'subscript', 'superscript', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],

              'buttonsVisible': 6
            },
            'moreParagraph': {
              'buttons': ['alignLeft', 'alignCenter', 'alignRight', 'formatOLSimple', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
              , 'buttonsVisible': 6
            },
            'moreRich': {
              'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertFile', 'insertHR', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly'],
              'buttonsVisible': 4
            },
            'moreMisc': {
              'buttons': ['undo', 'redo', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
              'align': 'right',
              'buttonsVisible': 2
            }
          },
          toolbarButtonsMD: {
            // Key represents the more button from the toolbar.
            moreText: {
              // List of buttons used in the  group.
              buttons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],

              // Alignment of the group in the toolbar.
              align: 'left',

              // By default, 3 buttons are shown in the main toolbar. The rest of them are available when using the more button.
              buttonsVisible: 3
            },


            moreParagraph: {
              buttons: ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'],
              align: 'left',
              buttonsVisible: 3
            },

            moreRich: {
              buttons: ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR'],
              align: 'left',
              buttonsVisible: 3
            },

            moreMisc: {
              buttons: ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
              align: 'right',
              buttonsVisible: 2
            }
          },
          toolbarButtonsSM: {
            'moreText': {
              'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting'],
              'buttonsVisible': 2
            },
            'moreParagraph': {
              'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote'],
              'buttonsVisible': 2
            },
            'moreRich': {
              'buttons': ['insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR'],
              'buttonsVisible': 2
            },
            'moreMisc': {
              'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
              'align': 'right',
              'buttonsVisible': 2
            }
          },
          toolbarButtonsXS: [['undo', 'redo'], ['bold', 'italic', 'underline']],

          videoManagerLoadURL: "http://localhost:8081/Froala/Service",
          videoManagerLoadMethod: "post",
          videoManagerLoadParams: { type: "video" },
          videoManagerPreloader: null,
          videoManagerDeleteURL: "",
          videoManagerDeleteMethod: "post",
          videoManagerDeleteParams: {},
          videoManagerPageSize: 12,
          videoManagerScrollOffset: 20,
          videoManagerToggleTags: !0,
          imageManagerLoadURL: "http://localhost:8081/Froala/Service"
        });

        this.setfun(FE)

      }
      setfun(FE) {
        var self = this;
        if (FE.msvideo == null) {
          setTimeout(function () {
            self.setfun(FE)
          }, 500)
          return;
        }

        FE.msvideo.setfun(function (obj, b, c, d) {
          var id = obj.data("id");
          var url = obj.data("url");
          var videohtml = '<iframe width="640" height="360" data-id="{id}" src="{url}" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" allowtransparency="true"></iframe>';

          videohtml = videohtml.replace('{url}', url);

          videohtml = videohtml.replace('{id}', id);

          while (videohtml.indexOf('iframe') > 0) {
            videohtml = videohtml.replace('iframe', 'video');
          }
          FE.video.insert(videohtml);
        });
      }
      addvideoManager(FroalaEditor) {
        FroalaEditor.DEFAULTS.videoInsertButtons.push('videoManager');
        FroalaEditor.RegisterCommand("videoManager", {
          title: "Browse",
          undo: !1,
          focus: !1,
          modal: !0,
          callback: function () {
            this.videoManager.show()
          },
          plugin: "videoManager"
        });

        var str = FroalaEditor.PLUGINS.imageManager.toString();
        while (str.indexOf('opts.imageManager') > 0) {
          str = str.replace('opts.imageManager', 'opts.videoManager');
        }
        str = str.replace('.image.insert(t.data("url")', '.msvideo.insert(t');
        str = str.replace('Manage Images', 'Manage Videos');
        str = str.replace('Manage Images', 'Manage Videos');
        str = str.replace('Manage Images', 'Manage Videos');
        var _exports = {}
        new Function("$e", "exports", 'exports.i=' + str)(FroalaEditor, _exports);
        FroalaEditor.PLUGINS.videoManager = _exports.i;
        FroalaEditor.PLUGINS.msvideo = function (s) {
          var fun = null;
          this.insert = function (id, a, b, c, d) {
            if (fun) {
              fun(id, a, b, c, d)
            }
          }
          this.setfun = function (val) {
            fun = val;
          }
        }
        FroalaEditor.SVG.videoManager = FroalaEditor.SVG.imageManager;
        FroalaEditor.DefineIcon("videoManager", {
          NAME: "folder",
          SVG_KEY: "videoManager"
        });
      }
      addvideoserver(FroalaEditor) {
        var VIDEO_PROVIDERS = [{
          test_regex: /^.*((youku.com))\/((v\/)|(\/u\/\w\/)|(embed\/)|(v_show\?))?\??v?=?([^#\&\?]*).*/,
          url_regex: /(?:https?:\/\/)?(?:player\.)?(?:v\.)?(?:m\.)?(?:youku\.com)\/(?:embed\/|v_show\/id_)?([0-9a-zA-Z_\-]+)(.+)?/g,
          url_text: "https://player.youku.com/embed/$1",
          html: '<iframe width="640" height="360" src="{url}" frameborder="0" allowfullscreen></iframe>',
          provider: "youku"
        }, {
          test_regex: /^.*((qq.com))\/((v\/)|(\/u\/\w\/)|(x\/cover\/)|(iframe\/player.html\?vid=))?\??v?=?([^#\&\?]*).*/,
          url_regex: /(?:https?:\/\/)(?:v\.)?(?:qq\.com)\/(?:x\/cover\/|iframe\/player.html\?vid=)?([0-9a-zA-Z_\-]+)(.+)?/g,
          url_text: "http://v.qq.com/iframe/player.html?vid=$1&tiny=0&auto=0",
          html: '<iframe width="640" height="360" src="{url}" frameborder="0" allowfullscreen></iframe>',
          provider: "tengxun"
        }];

        for (var i = 0; i < VIDEO_PROVIDERS.length; i++) {

          FroalaEditor.VIDEO_PROVIDERS.push(VIDEO_PROVIDERS[i]);

        }



      }
    }
    //

    new MsFroalaEditor(FroalaEditor)
  </script>
</body>
</html>